<template>
  <!-- 三公经费 -->
  <div class="publicFunds">
    <div class="tabTitle">
      <span>三公经费</span>
    </div>
    <el-tabs 
      v-model="tabActiveName"
      :before-leave="tabLeave"
      @tab-click="tabsChange"
      style="line-height: 52px; margin: 0;"
    >
      <el-tab-pane
        v-for="(item, index) in tabsOption"
        :key="index"
        :label="item.label"
        :name="item.name"
      >
        <component v-if="tabActiveName===item.name" :is="item.component" :ref = "item.name" :orgCodeOptions = "orgCodeOptions" :feesCodeOptions = "feesCodeOptions"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ExpenditureTable from "./com/ExpenditureTable"; // 数据列表
import Statistic from "./com/Statistic"; // 统计分析

export default {
  components: { ExpenditureTable, Statistic },
  data() {
    return {
      code:'jdjb-dtjd-sgxf',
      tabActiveName:'tableList',
      orgCodeOptions:[],
      feesCodeOptions:[]
    };
  },
  computed:{
    permissionBycode(){
      return this.$store.getters['PortalManagement/getPermissionBycode'](this.code)
    },
    tabsOption() {
      let data = []
      if (this.permissionBycode.includes(this.code + '-sjlb')) {
        data.push({label: '数据列表', name: 'tableList', key: 1, component: 'ExpenditureTable'})
      }
      if (this.permissionBycode.includes(this.code + '-tjfx')) {
        data.push({label: '统计分析', name: 'chartsList', key: 2, component: 'Statistic'})
      }
      return data
    }
  },
  created() {
  },
  mounted() {
    this.getTpConsumptionGetOrg()
    this.getTpConsumptionGetFees()
  },
  methods: {
    // 科目查询
    getTpConsumptionGetFees() {
      this.Api.getTpConsumptionGetFees().then(res => {
        if (res && res.code === '0') {
          this.feesCodeOptions = res.data
        } else {
          this.feesCodeOptions = []
          this.$message.warning(res.message)
        }
      })
    },
    // 公司/部门查询
    getTpConsumptionGetOrg() {
      this.Api.getTpConsumptionGetOrg().then(res => {
        if (res && res.code === '0') {
          this.orgCodeOptions = res.data
        } else {
          this.orgCodeOptions = []
          this.$message.warning(res.message)
        }
      })
    },
    // tab 切换触发事件
    tabsChange (tab, event) { },
    // 切换标签之前钩子函数 判断tab切换 初始化子组件数据
    tabLeave (activeName, oldActiveName) {
      if (activeName == oldActiveName) return
    }
  },
};
</script>
<style lang="less" scoped>
.publicFunds{
  width: 100%;
  margin-bottom: 20px;
  .tabTitle{
    padding:20px 20px 10px 20px;
    background: #fff; 
    line-height: 28px;
    font-size: 20px;
    color: #333333;
    font-weight: 600;
    user-select:none;
  }
  /deep/.el-tabs__header{
    background:#fff;
    padding:0 20px 15px 20px;
    margin: 0;
  }
}
</style>